import React, { Component } from 'react'
import memoryUtil from '../../utils/memoryUtil';
import { fmtLongDate } from '../../utils/dateUtil';
import { Modal } from 'antd';
import localStorage from '../../utils/storage';
import { withRouter } from 'react-router-dom';
import menuList from '../../config/menuConfig';
import { reqWeather } from '../../api/index';
import LinkButton from '../../components/link-button';

import './index.less';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            menuKeyValue: [],
            currentTime: fmtLongDate(Date.now()),
            weatherImg: '',
            weatherTxt: '',
        };
    }

    componentWillMount() {
        const { menuKeyValue } = this.state;
        const eachItem = (list) => {
            list.forEach(item => {
                if (item.subMenu) {
                    const { title, key } = item;
                    menuKeyValue.push({
                        title, key
                    });
                    eachItem(item.subMenu);
                } else {
                    menuKeyValue.push({...item});
                }
            });
        }
        eachItem(menuList);
        // console.log(menuKeyValue);
    }

    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({ currentTime: fmtLongDate(Date.now()) });
        }, 1000);

        // request weather
        this.getWeather();
    }
    
    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    logout = () => {
        Modal.confirm({
            title: '确定退出当前用户吗？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                // clean user data
                // local storage and memory
                memoryUtil.user = {};
                localStorage.removeUser();
                // redirect to login
                this.props.history.replace('/login');
                console.log('OK');
            },
            onCancel: () => {
                console.log('Cancel');
            }
        });
    }

    getTitle = () => {
        //根据当前请求的path得到title
        const path = this.props.location.pathname;
        const { menuKeyValue } = this.state;
        let menuItem = menuKeyValue.find(item => item.key === path);
        // console.log(menuItem);
        return menuItem && menuItem.title || '';
    }

    getWeather = async () => {
        const weather = await reqWeather('苏州');
        this.setState({
            weatherImg: weather.dayPictureUrl,
            weatherTxt: weather.weather
        })
    }

    render() {
        const { user } = memoryUtil;
        const { currentTime, weatherImg, weatherTxt } = this.state;
        const title = this.getTitle();
        return (
            <div className="header">
                <div className="header-top">
                    欢迎，{user.username}
                    <LinkButton style={{marginLeft: 10}} onClick={this.logout}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={weatherImg} alt="weather" />
                        <span>{weatherTxt}</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(Header)
